<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/static/vue-production.js"></script>
    <link rel="stylesheet" href="/static/index.css">
    <script src="/static/index.js"></script>
    <title>登录</title>
    <style>
        #app {
            margin: auto;
            width: 300px;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-form :model="form" label-position="right">
            <el-form-item label="用户名">
                <el-input v-model="form.name" clearable></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="form.pwd" clearable type="password" @keyup.enter.native="submit"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="large" @click="submit">登录</el-button>
            </el-form-item>
        </el-form>
        <p v-if="hint">{{hint}}</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                form: {
                    name: '',
                    pwd: ''
                },
                hint: ''
            },
            methods: {
                submit() {
                    if (!this.form.name) return alert('用户名不能为空')
                    if (!this.form.pwd) return alert('密码不能为空')
                    var formdata = new FormData()
                    formdata.append('name', this.form.name)
                    formdata.append('pwd', this.form.pwd)
                    fetch('/login', { method: 'post', body: formdata }).then(res => res.text()).then(msg => {
                        if (msg === 'ok') location.pathname = '/control'
                        else this.hint = msg
                    })
                }
            },
        })
    </script>
</body>

</html>